<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="box active">
            <div class="box2 active"></div>
            <ul>
                <li class="boxactive">第一个</li>
                <li class="active">第二个</li>
            </ul>
            <span>
                <span class="active title"></span>
            </span>
        </div>
    </div>

    <script>
        // var eles = document.querySelectorAll("*");
        // // console.log(eles);
        // eles.forEach(ele=>{
        //     // console.log(ele);
        //     let className = ele.className;
        //     // console.log(className);
        //     let reg = /\bactive\b/g;
        //     if(reg.test(className)){
        //         console.log(ele);
        //     }

        // })

        // function getEles(containerEle) {
        //     let childs = containerEle.childNodes;
        //     childs.forEach(child => {
        //         if (child.nodeType == 1) {
        //             // console.log(child);
        //             let reg = /\bactive\b/g;
        //             if(reg.test(child.className)){
        //                 console.log(child);
        //             }
        //             getEles(child);
        //         }
        //     })
        // }

        // getEles(document.querySelector(".container"));



        // arr.map(function(item){
        //     return item.age>20;
        // }).filter(function(item){
        //     return item.gender=="男";
        // }).map(function(item){
        //     item.height = "xxx";
        //     return item;
        // }).map(function(){
        //     return {reslut:"xxx"};
        // })

        // arr.map(item=>item.age>20).map(item=>item.gender=="男").map(item=>{
        //     item.height = "xxx";
        //     return item;
        // }).map(()=>({reslut:"xxx"}))

        // 前端：vscode （1.轻量 2.免费）、subline  、atom 、hbuild  、webstrom
        // php：phpstudio  nodepad++ ..

        // 面向对象：1.封装 （类、函数） 2.继承 3.多态 4.重载（没有）

        // 多态 ：一个方法拥有不同的形态；
        // 工作人员类
        // class Worder{
        //     dosomeThing(){
        //         console.log("在工作");
        //     }
        // }

        // class Student{
        //     dosomeThing(){
        //         console.log("在学习");
        //     }
        // }

        // // 多态的表现；
        // function getSomeThing(obj){
        //     obj.dosomeThing();
        // }

        // getSomeThing(new Worder());
        // getSomeThing(new Student());




    </script>
</body>

</html>